// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
  $hover-border: transparent,
  $active-background: $background,
  $active-border: transparent,
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  $before-background-color: if(lightness($background) < 90, $white, #202124);
  $hover-bg-color-lightened: tint-color(desaturate(adjust-hue($background, -.1094), 2.6665), 5.098);
  $hover-background-color: if(lightness($background) < 90, $hover-bg-color-lightened, $hover-background);
  $focus-bg-color-lightened: tint-color(desaturate(adjust-hue($background, -.0649), .3989), 23.1372);
  $focus-background-color: if(lightness($background) < 90, $focus-bg-color-lightened, shade-color($background, 11%));

  color: $color;
  background-color: $background;
  border-color: $border;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    content: "";
    background-color: $before-background-color;
    @include border-radius(4px);
    opacity: 0;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-property: transform, opacity;
    transform: scale(0);
  }

  &:hover,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  &.dropdown-toggle.show {
    color: color-contrast($hover-background);
    background-color: $hover-background-color;
    border-color: $hover-border;
    box-shadow: 0 1px 2px 0 rgba($background, .451), 0 1px 3px 1px rgba($background, .302);
  }

  .btn-check:focus + &,
  &:focus {
    background-color: $focus-background-color;
    box-shadow: 0 1px 2px 0 rgba($background, .302), 0 1px 3px 1px rgba($background, .149);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }

    &::before {
      opacity: .12;
      transform: scale(1);
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }

  &.btn-pill {
    @include button-pill-variant($background: $background, $color: $color, $border: $border, $hover-background: $hover-background-color, $active-background: $active-background);

    &:hover,
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    &.dropdown-toggle.show {
      background-color: $hover-background-color;
      border-color: $hover-border;
    }
  }
}

// @mixin button-legacy-variant($background, $border: transparent, $hover-background: shade-color($background, 15%), $hover-border: shade-color($value, 36%), $active-background: shade-color($background, 40%), $active-border: shade-color($border, 25%)) {
@mixin button-legacy-variant($color) {
  $btn-color-map: btn-legacy-color-map($color);

  $background:         btn-legacy-color-key($btn-color-map, "background");
  $border-color:       btn-legacy-color-key($btn-color-map, "border-color");
  $start-color:        btn-legacy-color-key($btn-color-map, "start-color");
  $end-color:          btn-legacy-color-key($btn-color-map, "end-color");
  $hover-border-color: btn-legacy-color-key($btn-color-map, "hover-border-color");
  $hover-start-color:  btn-legacy-color-key($btn-color-map, "hover-start-color");
  $hover-end-color:    btn-legacy-color-key($btn-color-map, "hover-end-color");
  $active-start-color: btn-legacy-color-key($btn-color-map, "active-start-color");
  $active-end-color:   btn-legacy-color-key($btn-color-map, "active-end-color");

  color: color-contrast($background);
  background-color: $background;
  border-color: $border-color;

  @include gradient-y($start-color: $start-color, $end-color: $end-color);

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: color-contrast($background);
    background-color: shade-color($end-color, 10%);
    @if $color == "secondary" or $color == "light" {
      // border-color: $gray-500;
      border-color: shade-color($hover-border-color, 62%);
    } @else {
      border-color: shade-color($hover-border-color, 20%);
    }
    @include gradient-y($start-color: $hover-start-color, $end-color: $hover-end-color);
  }

  &:focus,
  &.focus,
  &:active,
  &.active {
    @if $color == "secondary" or $color == "light" {
      // border-color: $gray-700;
      border-color: shade-color($hover-border-color, 96%);
    } @else {
      border-color: shade-color($hover-border-color, 20%);
    }
  }

  &:focus,
  &.focus {
    &:not(:active):not(.active):not(.btn-secondary):not(.btn-light) {
      border-color: $border-color;
      box-shadow: inset 0 0 0 1px $white;
    }
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  &.dropdown-toggle.show {
    color: color-contrast($active-end-color);
    @include gradient-y($start-color: $active-start-color, $end-color: $active-end-color);

    @if $color == "secondary" or $color == "light" {
      box-shadow: inset 0 1px 2px rgba($black, .1);
    } @else {
      box-shadow: inset 0 1px 2px rgba($black, .3);
    }
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $border: $btn-outline-border-color,
  $active-background: $color,
  $active-color: $color
) {
  $border-color: if(lightness($border) > 90, rgba(color-contrast($border), .295), $border);
  $hover-border-color: if(lightness($color) > 90, shade-color(saturate($border, .85), 9.8), shade-color(saturate(adjust-hue($color, 2), 5.75), 80));

  @include button-flat-variant($color: $color, $active-color: $border-color);
  border-color: $border-color;

  &:hover,
  .btn-check:focus + &,
  &:focus {
    border-color: $hover-border-color;
  }
}

@mixin button-raised-variant(
  $background,
  $border,
  $hover-background: shade-color($background, 15%),
  $hover-border: shade-color($border, 20%),
  $active-background: shade-color($background, 40%),
  $active-border: shade-color($border, 25%)
) {
  @include button-variant($background: $background, $border: $border);
  @include box-shadow($btn-box-shadow);

  &:hover {
    @include box-shadow($btn-raised-hover-box-shadow);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  &.dropdown-toggle.show {
    @include box-shadow( $btn-active-box-shadow);
  }
}

@mixin button-flat-variant(
  $color,
  $color-hover: $color,
  $active-background: rgba($color, .16),
  $active-border: rgba($color, .16),
  $active-color: if(lightness($color) > 90, color-contrast($color), $color)
) {
  $color: if(lightness($color) < 90, $color, color-contrast($color));
  $hover-background-color: if(lightness($color) > 90, rgba(color-contrast($color), .04), rgba($color, .04));
  $active-background-color: if(lightness($active-background) > 90, rgba($color, .12), $active-background);

  color: $color;
  border-color: transparent;

  &:hover {
    color: if(lightness($color-hover) > 90, color-contrast($color-hover), $color-hover);
    background-color: $hover-background-color;
    border-color: rgba($color, .04);
  }

  .btn-check:focus + &,
  &:focus {
    background-color: if(lightness($color) > 90, rgba(color-contrast($color), .12), rgba($color, .12));
    border-color: rgba($color, .04);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }

  &.btn-pill {
    @include button-pill-variant($color: $color, $border: transparent, $hover-background: $hover-background-color, $active-background: $active-background-color);
  }
}

// TODO: This mixin should only color attributes. The rest should be in the class
@mixin button-pill-variant(
  $background: $btn-pill-bg,
  $color: $btn-pill-color,
  $border: transparent,
  $hover-background: $btn-pill-hover-bg,
  $active-background: $btn-pill-active-bg
) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus,
  &.focus {
    background-color: $hover-background;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    background-color: $active-background;
  }
}

@mixin button-circle-variant(
  $color,
  $background: $white,
  $hover-background: rgba($black, .07),
  $active-background: rgba($black, .1),
  $width: 3.5rem
) {
  @include button-circle-size($width: $width);
  color: $color;
  text-align: center;
  background-color: $background;
  border-color: transparent;
  @include border-radius(50%);
  @include transition(background-color, opacity 100ms linear);

  &:hover {
    background-color: $hover-background;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    background-color: $active-background;
  }
}

// Button sizes for the circle variant
@mixin button-circle-size(
  $width: 3.5rem,
  $height: $width,
  $padding: 0,
  $font-size: 1.5rem
) {
  width: $width;
  height: $height;
  padding: $padding;
  @include font-size($font-size);
  @include border-radius(50%);
}

@mixin button-fab-variant(
  $background,
  $hover-background: if(lightness($background) > 90,
  rgba(color-contrast($background), .07),
  rgba($background, .75)),
  $active-background: if(lightness($background) > 90,
  rgba(color-contrast($background), .125),
  rgba($background, .65))
) {
  $color: color-contrast($background);

  @include button-circle-variant($color: $color, $background: $background,  $hover-background: $hover-background, $active-background: $active-background);
  @include box-shadow($shadow-6dp);
  @include transition(box-shadow 280ms cubic-bezier(.4, 0, .2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, .2, 1), -webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1), -webkit-transform 270ms 0ms cubic-bezier(0, 0, .2, 1));

  &:hover,
  &:focus,
  &.focus {
    @include box-shadow($shadow-8dp);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    @include box-shadow($shadow-8dp);
  }
}

@mixin button-icon-variant(
  $color,
  $background: $white,
  $hover-background: rgba($black, .07),
  $active-background: rgba($black, .1)
) {
  $color: if(lightness($color) > 90, color-contrast($color), $color);
  @include button-circle-variant($color: $color, $background: $background,  $hover-background: $hover-background, $active-background: $active-background, $width: 2.5rem);
}
